<template>
    <div class="add-form">
        <Form
            ref="addForm"
            :model="form"
            :rules="diyData.rules"
            :label-width="100"
        >
            <div class="tag-title">添加</div>
            <FormItem label="标题" prop="title">
                <Input clearable 
                    v-model="form.title"
                    placeholder="请输入标题"
                    style="width: 440px"
                ></Input>
            </FormItem>
            <FormItem label="状态" prop="status">
                <RadioGroup v-model="form.status">
                    <Radio label="1">显示</Radio>
                    <Radio label="0">隐藏</Radio>
                </RadioGroup>
            </FormItem>
        </Form>
        <Button
            type="primary"
            style="width: 90px; margin-right: 20px"
            @click="submit"
        >
            保存
        </Button>
        <Button style="width: 90px" @click="$router.go(-1)">
            取消
        </Button>
    </div>
</template>

<script>

export default {
    name: 'add-form',
    data () {
        return {
            query: {},
            search: {},
            diyDom: {},
            // 表单数据
            form: {
                title: '',
                status: ''
            },
            diyData: {
                rules: {
                    title: [
                        {
                            required: true,
                            message: '标题不能为空',
                            trigger: 'blur'
                        }
                    ],
                    status: [
                        {
                            required: true,
                            message: '状态不能为空',
                            trigger: 'change'
                        }
                    ]
                }
            },
            apiData: {}
        }
    },
    computed: {},
    methods: {
        // 获取详情
        getDetail () {

        },
        submit () {
            this.$refs['addForm'].validate((valid) => {
                if (valid) {
                    const opt = { ...this.form }
                    if (this.query.id) {
                        opt.id = this.query.id
                    } else {

                    }
                }
            })
        }
    },
    mounted () {
        this.query = this.$route.query
        this.query.id && this.getDetail()
    }
}
</script>

<style scoped lang="less">
.add-form {
    border: 1px solid #ededed;
    margin: 0 20px;
    padding: 26px 20px;

    .title {
        border-left: 5px solid #2d8cf0;
        padding: 0 0 0 10px;
        margin: 0 20px 20px;
        font-weight:bold;
    }
}
</style>
